<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin:0;
		padding: 0 
	}
	canvas{
		display: block;
		margin:0 auto;
		border: 1px solid red;
		box-shadow: 3px 3px 3px #999;
	}
	</style>
</head>
<body>
	<canvas id="canvas" width="800" height="600">
	
	</canvas>
</body>
<script type="text/javascript">
    var canvas=document.querySelector("#canvas");
    var context=canvas.getContext("2d");
    
    context.moveTo(50,50);
    context.lineTo(750,50);
    context.lineTo(750,550);
    context.lineTo(50,550);
    context.lineTo(50,50);

    context.moveTo(225,180);
    context.lineTo(312.5,550);
    context.lineTo(50,300);
    context.lineTo(400,300);
    context.lineTo(137.5,550);
    context.lineTo(225,180);

    context.moveTo(575,50);
    context.lineTo(750,550);
    context.lineTo(400,550);
    context.lineTo(575,50);
    context.stroke();
</script>
</html>